<script setup lang="ts">
import { ref } from "vue";

const { isLike = false, isStar = false } = defineProps<{
  isLike?: boolean;
  isStar?: boolean;
}>();

const emits = defineEmits(["like", "star", "comment"]);

const usePostActions = () => {
  const showComment = ref(false);

  const handleLike = () => {
    emits("like");
  };

  const handleStar = () => {
    emits("star");
  };

  const handleComment = () => {
    showComment.value = !showComment.value;
    emits("comment", showComment.value);
  };

  return {
    showComment,
    handleLike,
    handleStar,
    handleComment,
  };
};

const { handleLike, handleStar, handleComment } = usePostActions();
</script>

<template>
  <view class="postAction">
    <div class="postAction-input" @click="handleComment">请输入评论....</div>

    <div class="postAction-action">
      <van-action-bar-icon
        :icon="isLike ? 'like' : 'like-o'"
        text="点赞"
        :color="isLike ? '#e1002a' : ''"
        @click="handleLike"
      />
      <van-action-bar-icon
        :icon="isStar ? 'star' : 'star-o'"
        text="收藏"
        @click="handleStar"
        :color="isStar ? '#f0a311' : ''"
      />
    </div>
  </view>
</template>
